<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  body{background: #000}
  li{list-style: none;}
  .fl{float: left;}
  #box{width: 294px;height: 224px;padding: 7px;background: #fff;margin: 200px auto;border: none;}
  div{width: 290px;height: 220px;border: 1px solid #FF6300;padding: 2px;}
  ul{margin-top: 4px;}
  li{border: 1px solid #FFADAD;font-size: 13px;width: 45px;height: 26px;margin-bottom: 3px;line-height: 26px;text-align: center;cursor: pointer;}
  img{width: 184px;height: 216px;margin: 4px 6px;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var Ul = document.getElementsByTagName('ul');
      var Li = document.getElementsByTagName('li');
      var Img = document.getElementsByTagName('img')[0];
      var pic = ['images/10.jpg','images/11.jpg','images/12.jpg','images/13.jpg','images/14.jpg','images/15.jpg','images/16.jpg','images/17.jpg','images/18.jpg','images/19.jpg','images/20.jpg','images/21.jpg','images/22.jpg','images/23.jpg'];
      var num = 0;
      var timer = null;
      function inital(n){
        for (var i = 0; i < Li.length; i++) {
          Li[i].style.color = '#000';
          Li[i].style.background = '';
        };
        Img.src = pic[n];
        Li[n].style.background = '#FF637B';
        Li[n].style.color = '#fff';
      }
      inital(num);
      function one(){
        timer = setInterval(function(){
            num++;
            num %= Li.length;
            inital(num);
        },1000)
      }
      one();
      for (var i = 0; i < Li.length; i++){
        Li[i].index = i;
        Li[i].onmouseover = function(){
          clearInterval(timer);
          num = this.index;
          inital(num)
        }
        Li[i].onmouseout = one;
      }; 
    }
  </script>
</head>
<body>
  <div id="box">
    <div>
      <ul class="fl">
        <li>连衣裙</li>
        <li>雪纺</li>
        <li>T恤</li>
        <li>铅笔裤</li>
        <li>婚纱</li>
        <li>外套</li>
        <li>连体裤</li>
      </ul>
      <img class="fl" src="">
      <ul class="fl">
        <li>包包</li>
        <li>凉鞋</li>
        <li>单鞋</li>
        <li>太阳镜</li>
        <li>丝袜</li>
        <li>帆布鞋</li>
        <li>情侣装</li>
      </ul>
    </div>
  </div>
</body>
</html>